<template>
  <div style="width: 250px">
    <div class="title-box">
      <span class="subtitle ellipsis2" :title="cfg.chkitemName">{{ cfg.chkitemName }}</span>
      <el-checkbox :value="isThrowTerm" v-if="cfg.showThrowTerm" @click.native="changeScoreResult">甩项</el-checkbox>
    </div>
    <el-form class="form" ref="form" size="mini" :model="form" label-width="70px" :class="{ disabled: isThrowTerm }">
      <el-form-item label="得分录入" prop="scoreInput" :rules="isThrowTerm ? [] : rules.scoreInput">
        <el-select v-model="form.scoreInput" placeholder="请选择" :disabled="isThrowTerm" style="width: 100%" @change="handleScoreResult">
          <el-option v-for="dict in enumDicts" :key="dict.value" :label="dict.label" :value="dict.value" />
        </el-select>
      </el-form-item>
      <div class="footer" v-show="!isThrowTerm">
        <el-dropdown trigger="click">
          <dict-tag class="pointer" :options="dict.type.cq_eval_result" :value="form.scoreResult" style="zoom: 0.9" />
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item v-for="dict in dict.type.cq_eval_result" :key="dict.value" @click.native="form.scoreResult = dict.value">{{ dict.label }}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </el-form>
  </div>
</template>
<script>
// 枚举。dataType 为 'EVAL_ENUM'
import { CQ_EVAL_RESULT_ENUM as RESULT } from '@/utils/baseData'
import { getEnum } from '@/api/common'
import { matchingRule } from './common'
import FormMixin from './mixin'
export default {
  mixins: [FormMixin],
  dicts: ['cq_eval_result'],
  data() {
    return {
      formInitVals: {
        chkitemScoreId: '',
        versionId: '',
        versionCode: '',
        chkitemCfgId: '',
        chkitemCode: '',
        scoreType: '',
        scoreInput: '',
        scoreResult: '',
        isValid: 0,
        isExce: 0
      },
      rules: {
        scoreInput: [{ required: true, message: '请选择一项' }]
      },
      dictName: '',
      enumDicts: []
    }
  },
  computed: {
    isThrowTerm() {
      return this.form.scoreResult === RESULT.THROWTERM
    }
  },
  watch: {
    cfg: {
      deep: true,
      immediate: true,
      handler(val) {
        const data = val || {}
        const dictName = data.scoreType
        if (!dictName) return
        if (dictName === this.dictName && this.enumDicts?.length) return
        if (data.enumDicts?.length) return (this.enumDicts = data.enumDicts)

        getEnum(dictName)
          .then(res => (this.enumDicts = res.data?.[dictName] || []))
          .catch(() => console.error(`get dict fail: ${dictName}`))

        this.handleScoreResult()
      }
    }
  },
  methods: {
    changeScoreResult(e) {
      // 防止点击事件冒泡两次
      if (e.target.tagName === 'INPUT') return

      const { form } = this
      if (this.isThrowTerm) {
        form.scoreResult = ''
        return this.handleScoreResult()
      }
      form.scoreResult = RESULT.THROWTERM
      form.scoreInput = ''
      this.$refs.form.clearValidate()
    },
    handleScoreResult() {
      const { form } = this
      if (this.isThrowTerm) return
      form.scoreResult = matchingRule({ rule: this.cfg.resultStdd, value: form.scoreInput })
    }
  }
}
</script>
<style lang="scss" scoped>
.title-box {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #ebeef5;
  padding: 10px 10px 5px;
  .subtitle {
    padding-right: 10px;
  }
}
.form {
  padding: 10px;
  &.disabled {
    opacity: 0.8;
    pointer-events: none;
  }
}
.footer {
  text-align: right;
  padding-top: 5px;
}
</style>
